<template>
  <div class="page">
    <HeaderBar :fixed="true" :theme="theme" :active="'home'"/>
    <div class="page-main">
      <div class="main-swiper swiper-container" >
        <div class="swiper-wrapper">
          <!-- 首屏 -->
          <div class="swiper-slide">
            <ModuleScreen1 ref="screen1Ref" :cur="swiperIndex"/>
          </div>
          <!-- 第二屏 -->
          <div class="swiper-slide">
            <ModuleScreen2 ref="screen2Ref" :info="info" :cur="swiperIndex"/>
          </div>
          <!-- 第三屏 -->
          <div class="swiper-slide">
            <ModuleScreen3 ref="screen3Ref" :cur="swiperIndex"/>
          </div>
          <!-- 第四屏自适应高度 -->
          <div class="swiper-slide">
            <div class="screen-scroll-view" :class="{'scroll': isScroll}" @scroll="viewScroll">
              <ModuleScreen4 ref="screen4Ref" :info="info" :cur="swiperIndex"/>
              <FooterBar />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import Swiper from 'swiper'
import { Mousewheel } from 'swiper/modules'
import 'swiper/scss';
import { hideLoading } from '@/utils/utils';
import { getHomeInfo } from '@/api/home';
import WOW from 'wow.js'

import HeaderBar from '@/components/HeaderBar/index.vue'
import FooterBar from '@/components/FooterBar/index.vue'
import ModuleScreen1 from './ModuleScreen1.vue'
import ModuleScreen2 from './ModuleScreen2.vue'
import ModuleScreen3 from './ModuleScreen3.vue'
import ModuleScreen4 from './ModuleScreen4.vue'

const theme = ref('transparent')
const screen1Ref = ref()
const screen2Ref = ref()
const screen3Ref = ref()
const screen4Ref = ref()
const swiperIndex = ref(0)
const isScroll = ref(false)
const info = ref({})

let mainSwiper = null;

onMounted(() => {
  getHomeInfo().then(res => {
    info.value = res.data.list
    loadMainSwiper()
  })
});

const viewScroll = (e) => {
  const _scrollTop = e.target.scrollTop
  if (_scrollTop > 0) {
    mainSwiper.disable()
  } else {
    mainSwiper.enable()
  }
}

const loadMainSwiper = () => {
  mainSwiper = new Swiper('.main-swiper', {
    direction: 'vertical',
    mousewheel: true,
    touchReleaseOnEdges: true,
    simulateTouch: false,
    speed: 1000,
    modules: [Mousewheel],
    mousewheel: {
      forceToAxis: true,
      sensitivity: 0.8,
      releaseOnEdges: true
    },
    on: {
      init: () => {
        // screen1Ref.value.init()
        // screen2Ref.value.init()
        // screen3Ref.value.init()
      },
      slideChangeTransitionStart: swiper => {
        const _index = swiper.realIndex
        if (_index == 1 || _index == 3) {
          // isScroll.value = true
          theme.value = 'white'
        } else {
          // isScroll.value = false
          theme.value = 'transparent'
        }
        swiperIndex.value = _index
      },
    }
  });
  hideLoading()
};
</script>

<style lang="scss">
@use '@/assets/style/common.scss';
.page {
  width: 100%;
  height: 100%;
}
html, body {
  scrollbar-width: none;
}

html::-webkit-scrollbar, -webkit-scrollbar::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
  color: transparent;
}
.page {
  width: 100%;
  height: 100%;
}
.page-main, .main-swiper, .banner-swiper, .banner {
  width: 100%;
  height: 100vh;
  position: relative;
}
.banner {
  display: block;
}
.home-block {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.screen-scroll-view {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  // scrollbar-width: none;
  &.scroll {
    overflow-y: auto;
  }
  &::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
    color: transparent;
  }
}
</style> 